﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="ServiceQuestions.aspx.cs" Inherits="ServiceQuestions" %>

<asp:Content ID="Content1" ContentPlaceHolderID="BodyContent" runat="Server">
    <div class="contentfull">
        <div class="breadcrumbs">
            <ul id="crumbs">
                <li><a title="My Account" href="#">My Account</a>
                    <img src="Content/Images/separator.png" alt="&rarr;" class="separator">
                    Buttons</li>
            </ul>
        </div>

        <div id="showMessages"></div>

        <div class="top">
            <div class="innerleft">
                <h1>Edit Button &#8220;<%= DisplayServiceName %>&#8221; - Step 4</h1>
            </div>
            <ol id="wizard-menu" class="group">
                <li title="Select button type" style="width: 16.50%; float: left">
                    <a href="ServiceType.aspx?ServiceId=<%= ServiceId.ToString() %>" style="width: 100%" class="wizard-step w-before group red" id="step1">
                        <img src="Images/scan48.png" alt="Type">
                        <span class="mobile_disabled">Type</span>
                    </a>
                </li>
                <li title="Name this button." style="width: 16.50%; float: left">
                    <a href="ServiceName.aspx?ServiceId=<%= ServiceId.ToString() %>" style="width: 100%" class="wizard-step w-before group green" id="step2">
                        <img src="Images/service48.png" alt="Name">
                        <span class="mobile_disabled">Name</span>
                    </a>
                </li>
                <li title="Authorize users for this button." style="width: 16.50%; float: left">
                    <a href="ServiceUsers.aspx?ServiceId=<%= ServiceId.ToString() %>" style="width: 100%" class="wizard-step w-before group orange" id="step3">
                        <img src="Images/user48.png" alt="Users">
                        <span class="mobile_disabled">Users</span>
                    </a>
                </li>
                <li title="Ask questions alongside each scan made by this button." style="width: 16.50%; float: left">
                    <a href="ServiceQuestions.aspx?ServiceId=<%= ServiceId.ToString() %>" style="width: 100%" class="wizard-step w-active group gold" id="step4">
                        <img src="Images/question48.png" alt="Questions">
                        <span class="mobile_disabled">Questions</span>
                    </a>
                </li>
                <li title="Modify advanced settings" style="width: 16.50%; float: left">
                    <a href="ServiceAdvanced.aspx?ServiceId=<%= ServiceId.ToString() %>" style="width: 100%" class="wizard-step w-after group blue" id="step5">
                        <img src="Images/optional48.png" alt="Advanced">
                        <span class="mobile_disabled">Advanced</span>
                    </a>
                </li>
                <li title="Done" style="width: 16.50%; float: left">
                    <a href="ServiceDone.aspx?ServiceId=<%= ServiceId.ToString() %>" style="width: 100%" class="wizard-step w-after group purple" id="review">
                        <img src="Images/confirm48.png" alt="Done">
                        <span class="mobile_disabled">Done</span>
                    </a>
                </li>
            </ol>
        </div>
        <div class="content">
            <form id="submitQuestions" method="post" action="ServiceAdvanced.aspx">
                <div class="wizard-nav">
                    <input type="submit" name="login" value="Save and Continue" class="black_button blarge next" />
                </div>
                <h2 class="large">Optional: Choose Questions</h2>
                <span class="lower_comment same">
                    <strong>What Are Questions?</strong><br />
                    Questions are SSICA's method of data collection. They ask the mobile user for more input in the form of multiple choice, checkboxes, or a text field in which the user can add their own info. On this page, you can decide at which point in scanning your questions will be presented to your mobile users.<br />
                </span>
                <input type="hidden" name="action" value="editQuestions" />
                <input type="hidden" name="serviceid" value="<%= ServiceId.ToString() %>">
                <fieldset>
                    <div class="innerright">
                        <button class="black_button blarge add_question" id="add_q_button">Add a Question</button>
                    </div>
                    <p class="label">Select the order of questions asked upon each scan by dragging questions in the fields below...</p>
                    <div style="clear: both;"></div>
                    <div id="add_q_form" style="display: none;">
                        <strong>Question</strong>
                        <span class="lower_comment same">Question to prompt the user with</span>
                        <input class="largeinput" id="question_name" name="question" type="text" />
                        <strong>Answer Type</strong>
                        <span class="lower_comment same">How the user will answer</span>
                        <select id="question_type" class="largeinput" name="answertype">
                            <option value="manual" selected="true">Short Answer</option>
                            <option value="manualnumeric">Short Answer (Numeric)</option>
                            <option value="barcode">Short Answer (Barcode)</option>
                            <option value="barcodenumeric">Short Answer (Barcode Numeric)</option>
                            <option value="option">Multiple Choice (Single Answer)</option>
                            <option value="checkbox">Multiple Choice (Multiple Answers)</option>
                            <option value="dropdown">Multiple Choice (Drop-Down Menu)</option>
                        </select>
                        <div id="q_options">
                            <strong>Answers:</strong>
                            <span class="lower_comment same">Drag and drop to select options to present to the user.</span>
                            <ul class="indent2" id="q_options_list">
                                <li class="q_answer_li"><span class="opt_draghandle">Option:</span><div class="input_wrapper q_answer">
                                    <input type="text" name="answer[]" class="inputed" />
                                </div>
                                    <input type="button" class="remove_q_button" /></li>
                                <li class="q_answer_li"><span class="opt_draghandle">Option:</span><div class="input_wrapper q_answer">
                                    <input type="text" name="answer[]" class="inputed" />
                                </div>
                                    <input type="button" class="remove_q_button" /></li>
                                <button id="add_q_option" class="black_button blarge">Add Option</button>
                            </ul>
                        </div>
                        <div class="innerright">
                            <button class="black_button blarge" id="close_q_button">Close</button>
                            <button class="black_button blarge" id="submit_q_button">Submit</button>
                        </div>
                        <div style="clear: both;"></div>
                    </div>
                    <div id="q_area_wrapper">
                        <div id="NULL_wrapper">
                            <div id="NULL_wrapper2">
                                <ul class="q_order" id="q_order_NULL">
                                    <li class="nodrag" id="id_NULL">Available Questions<span class="add_question_icon add_question" /></li>
                                    <li class="dragempty nodrag" style="display: none;">Drag From Here</li>

                                    <%= GetAvailableQuestions() %>
                                </ul>
                            </div>
                        </div>
                        <table class="q_table">
                            <tr>
                                <td class="center_q_order divided" colspan="2">
                                    <ul class="q_order" id="q_order_pre_submit">
                                        <li class="nodrag" id="id_pre_submit">Ask before submitting any scan<span class="add_question_icon add_question" /></li>                                        
                                        <%= GetSelectedQuestions(Enums.QuestionsType.pre) %>
                                    </ul>
                                </td>
                            </tr>
                            <tr>
                                <td class="center_q_explain" colspan="2">
                                    <div><span class="q_explain_scan q_explain_icon"></span><span>Scan is submitted</span></div>
                                </td>
                            </tr>
                            <tr>
                                <td class="center_q_order divided" colspan="2">
                                    <ul class="q_order" id="q_order_post_submit">
                                        <li class="nodrag" id="id_post_submit">Ask after submitting any scan<span class="add_question_icon add_question" /></li>                                        
                                          <%= GetSelectedQuestions(Enums.QuestionsType.post) %>
                                    </ul>
                                </td>
                            </tr>
                            <tr>
                                <td class="center_q_explain">
                                    <div><span class="q_explain_valid q_explain_icon"></span><span>Valid Scan</span></div>
                                </td>
                                <td class="center_q_explain">
                                    <div><span class="q_explain_invalid q_explain_icon"></span><span>Invalid or Error Scan</span></div>
                                </td>
                            </tr>
                            <tr>
                                <td class="divided">
                                    <ul class="q_order" id="q_order_valid_scan">
                                        <li class="nodrag" id="id_valid_scan">Ask after submitting a valid scan<span class="add_question_icon add_question" /></li>                                        
                                          <%= GetSelectedQuestions(Enums.QuestionsType.valid) %>
                                    </ul>
                                </td>
                                <td class="divided divider">
                                    <ul class="q_order" id="q_order_invalid_scan">
                                        <li class="nodrag" id="id_invalid_scan">Ask after submitting a non valid scan<span class="add_question_icon add_question" /></li>                                        
                                          <%= GetSelectedQuestions(Enums.QuestionsType.invalid) %>
                                    </ul>
                                </td>
                            </tr>
                        </table>
                        <div style="clear: both;"></div>
                    </div>
                    <input type="submit" name="login" value="Save and Continue" class="black_button blarge right" />
                    <br />
                    <script>
                        $(document).ready(function () {

                            var toggleP = function (event, ui) {
                                // Toggle function for labels when a drop zone is empty
                                if ($(this).find("li:not(.nodrag)").length > 0) {
                                    $(this).find(".dragempty").hide();
                                } else {
                                    $(this).find(".dragempty").fadeIn("slow");
                                }
                            }, automove = function () {
                                // event handler for plus/minus buttons
                                if ($(this).is("#q_order_NULL .dragmove")) {
                                    $(this).parent().insertAfter($("#id_pre_submit").next());
                                } //presubmit
                                else if ($(this).is("#q_order_pre_submit .dragmove")) {
                                    $(this).parent().insertAfter($("#id_NULL").next()); //remove
                                } else if ($(this).is("#q_order_pre_submit .dragmovedown")) {
                                    $(this).parent().insertAfter($("#id_post_submit").next()); //down
                                } //postsubmit
                                else if ($(this).is("#q_order_post_submit .dragmove")) {
                                    $(this).parent().insertAfter($("#id_NULL").next()); //remove
                                } else if ($(this).is("#q_order_post_submit .dragmoveup")) {
                                    $(this).parent().insertAfter($("#id_pre_submit").next()); //up
                                } else if ($(this).is("#q_order_post_submit .dragmovedown")) {
                                    $(this).parent().insertAfter($("#id_valid_scan").next()); //down
                                } //valid
                                else if ($(this).is("#q_order_valid_scan .dragmove")) {
                                    $(this).parent().insertAfter($("#id_NULL").next()); //remove
                                } else if ($(this).is("#q_order_valid_scan .dragmoveup")) {
                                    $(this).parent().insertAfter($("#id_post_submit").next()); //up
                                } else if ($(this).is("#q_order_valid_scan .dragmoveside")) {
                                    $(this).parent().insertAfter($("#id_invalid_scan").next()); //side
                                } //invalid
                                else if ($(this).is("#q_order_invalid_scan .dragmove")) {
                                    $(this).parent().insertAfter($("#id_NULL").next()); //remove
                                } else if ($(this).is("#q_order_invalid_scan .dragmoveup")) {
                                    $(this).parent().insertAfter($("#id_post_submit").next()); //up
                                } else if ($(this).is("#q_order_invalid_scan .dragmoveside")) {
                                    $(this).parent().insertAfter($("#id_valid_scan").next()); //side
                                }

                                $(".q_order").each(toggleP);
                                return false;
                            }, qedit = function () {
                                var qorder_li = $(this).parent(), q_info = qorder_li.find(".q_info"), id = qorder_li.find("input[type=hidden]").val();
                                if (q_info.is(":hidden")) {
                                    q_info.load("/account/questions/" + id + "/form/", function () {
                                        q_info.slideDown().find("input[type=submit]").addClass('right').click(function () {
                                            var t = q_info.find("input, select").serialize().replace(/%5B%5D/g, '[]') + "&action=editquestionajax&questionid=" + id;
                                            $.post("/account/questions", t, function (res) {
                                                if (res != "1032") {
                                                    alert("There was an error editing your question, please try again.");
                                                } else {
                                                    qorder_li.find(".dragtext").text(q_info.find("input[name=questiontext]").val());
                                                    q_info.text('').slideUp();
                                                }
                                                return false;
                                            });
                                            return false;
                                        }).after($('<div/>', { style: 'clear: both;' }))
                                        .after($('<input/>', { class: 'black_button blarge right', style: 'margin-right:.5em;', type: 'button', value: 'Cancel' }).click(function () {
                                            q_info.text('').slideUp();
                                            return false;
                                        }));
                                    });
                                } else {
                                    q_info.text('').slideUp();
                                }
                                return false;
                            }, remEvent = function (event) {
                                // event handler for question creation option removal button
                                $(this).parent().remove();
                                if ($(".remove_q_button").length == 1) {
                                    $(".remove_q_button").hide();
                                }
                            };
                            // initialize sortables on all the orderings
                            $(".q_order").sortable({
                                connectWith: ".q_order",
                                items: "> li:not(.nodrag)",
                                placeholder: "dragplaceholder",
                                revert: 250,
                                forcePlaceholderSize: true,
                                deactivate: toggleP,
                                change: toggleP,
                                tolerance: "pointer",
                                appendTo: "#submitQuestions",
                                helper: "clone"
                            })
                            // register handlers for all php created question list
                            $(".dragmove").click(automove);
                            $(".dragmoveup").click(automove);
                            $(".dragmovedown").click(automove);
                            $(".dragmoveside").click(automove);
                            $(".q_edit").click(qedit);

                            // handler for submission of final form
                            $("#submitQuestions").submit(function () {
                                $(this).find('#q_order_pre_submit input:hidden').attr('name', 'order_pre_submit[]');
                                $(this).find('#q_order_post_submit input:hidden').attr('name', 'order_post_submit[]');
                                $(this).find('#q_order_valid_scan input:hidden').attr('name', 'order_valid_scan[]');
                                $(this).find('#q_order_invalid_scan input:hidden').attr('name', 'order_invalid_scan[]');
                                $(this).find('#q_order_NULL input:hidden').attr('name', 'order_NULL[]');
                            });

                            // create handler for hitting enter inside add question form
                            var forceEnterTarget = (function () {
                                $('#add_q_form').find("input, select").keypress(function (event) {
                                    if (event.keyCode == 13) {
                                        $('#submit_q_button').click();
                                        return false;
                                    }
                                });
                            });
                            forceEnterTarget();

                            // handlers for 'add question' and question creation form 'close' button
                            $(".add_question").click(function (event) {
                                $("#add_q_button").hide();
                                insert_point = $(this).parent();
                                if (!$.contains($(".q_table").get(0), insert_point.get(0))) {
                                    insert_point = "#id_NULL";
                                }
                                $("#add_q_form").slideDown();
                                return false;
                            });
                            $("#close_q_button").click(function (event) {
                                $("#add_q_button").show();
                                $("#add_q_form").slideUp();
                                return false;
                            });
                            // handler for dynamic question creation 'submit' button
                            $("#submit_q_button").click(function (event) {
                                var q = $("#question_name").val(),
                                t = $("#question_type").val();
                                $.post("/account/questions", $("#add_q_form input, #add_q_form select").serialize() + "&action=addquestionajax", function (res) {
                                    if (res == "-1") {
                                        alert("There was an error creating your question, please try again.");
                                        return;
                                    }
                                    var q2 = $('<div/>').text(q).html(), q3 = "Question Type: " + t;
                                    $("<li/>", { class: "q_order_li" }).append($("<span/>", { class: "draghandle mobile_disabled" }).html("&nbsp;")).append($("<span/>", { class: "q_" + t + "" }).html("&nbsp;")).append($("<span/>", { class: "dragmove" }).html("&nbsp;").click(automove)).append($("<span/>", { class: "dragmoveup" }).html("&nbsp;").click(automove)).append($("<span/>", { class: "dragmovedown" }).html("&nbsp;").click(automove)).append($("<span/>", { class: "dragmoveside" }).html("&nbsp;").click(automove)).append($("<span/>", { class: "q_edit mobile_disabled" }).html("&nbsp;").click(qedit)).append($("<input/>", { type: "hidden", class: "inputcheckbox", value: "" + res + "" })).append($("<label/>", { class: "dragtext" }).html("" + q2 + "")).append($("<div/>", { class: "q_info", style: "display: none;" }).html("" + q3 + "")).hide().insertAfter($(insert_point).next()).fadeIn(1000);
                                    $("#add_q_form").find("input[type=text]").val('');
                                    $("#add_q_form").find("select").val('manual').change();
                                    $(".remove_q_button").slice(2).parent().remove();
                                    $("#add_q_button").show();
                                    $("#add_q_form").slideUp(200);
                                    $(".q_order").each(toggleP);
                                });
                                return false;
                            });
                            // handler for addition of question option button
                            $("#add_q_option").click(function (event) {
                                $(this).before('<li class="q_answer_li"><span class="opt_draghandle">Option:</span><div class="input_wrapper q_answer"><input type="text" name="answer[]" class="inputed"/></div><input type="button" class="remove_q_button"/></li>');
                                $(this).parent().find(".remove_q_button").show().last().click(remEvent);
                                $(this).parent().find(".opt_draghandle").disableSelection();
                                forceEnterTarget();
                                return false;
                            });
                            // handler for showing/hiding option section
                            $("#question_type").change(function () {
                                var v = $(this).val();
                                if (v == "option" || v == "dropdown" || v == "checkbox" || false) {
                                    $("#q_options").slideDown();
                                } else {
                                    $("#q_options:visible").slideUp();
                                    $("#q_options:hidden").hide();
                                }
                            }).change();

                            // create sortable from option list
                            $("#q_options_list").sortable({ revert: 250, containment: "#q_options_list", handle: ".opt_draghandle" }).find(".opt_draghandle").disableSelection();
                            // register deltion handle for all php create option removal buttons
                            $(".remove_q_button").click(remEvent);
                        });
                    </script>

                    </span>
                   
                </fieldset>
            </form>
        </div>
    </div>
    <!-- /.contentfull -->
</asp:Content>

